/*
 * @Author: xiaosihan 
 * @Date: 2025-08-23 15:00:00 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2025-11-06 23:55:28
 */
// PC页面模板组件 - 严格遵循此模板的导入顺序和格式
import React, { useEffect } from 'react';

// 页面样式必须要使用module.less后缀的文件
import clsx from 'clsx';
import styles from './web3Demo.module.less';

// PC端使用observer来包裹组件，使mobx可以监听状态变化
import { observer } from 'mobx-react-lite';
import web3DemoStore from './Web3DemoStore';

// 子组件导入
import WalletConnect from './components/WalletConnect';
import Transaction from './components/Transaction';
import ContractInteraction from './components/ContractInteraction';
import TokenBalance from './components/TokenBalance';

// 其他导入
import Web3 from 'web3';

// 组件props接口定义
interface Iprops {
    children?: React.ReactNode;
}

/**
 * Web3Demo页面组件
 * 遵循项目统一的开发规范
 */
// 重要：组件函数不要使用React.FC类型注解
const Web3Demo = observer((props: Iprops) => {
    const { web3, account, balance, networkId, isConnected, contractResult, activeTab } = web3DemoStore;

    // 初始化Web3实例
    useEffect(() => {
        web3DemoStore.initializeWeb3();
    }, []);

    // 更新账户余额
    const updateBalance = async (accountAddress: string) => {
        await web3DemoStore.updateBalance(accountAddress);
    };

    // 处理交易结果
    const handleTransactionResult = (result: string) => {
        web3DemoStore.setContractResult(result);
    };

    // 处理合约交互结果
    const handleContractResult = (result: string) => {
        web3DemoStore.setContractResult(result);
    };

    // 处理代币查询结果
    const handleTokenResult = (result: string) => {
        web3DemoStore.setContractResult(result);
    };

    // 渲染各个功能卡片
    const renderActiveTab = () => {
        switch (activeTab) {
            case 'wallet':
                return (
                    <WalletConnect
                        web3={web3}
                        account={account}
                        balance={balance}
                        networkId={networkId}
                        isConnected={isConnected}
                        setAccount={web3DemoStore.setAccount.bind(web3DemoStore)}
                        setBalance={web3DemoStore.setBalance.bind(web3DemoStore)}
                        setNetworkId={web3DemoStore.setNetworkId.bind(web3DemoStore)}
                        setIsConnected={web3DemoStore.setIsConnected.bind(web3DemoStore)}
                    />
                );
            case 'transaction':
                return (
                    <Transaction
                        web3={web3}
                        account={account}
                        isConnected={isConnected}
                        onResult={handleTransactionResult}
                    />
                );
            case 'contract':
                return (
                    <ContractInteraction
                        web3={web3}
                        account={account}
                        isConnected={isConnected}
                        onResult={handleContractResult}
                    />
                );
            case 'tokens':
                return (
                    <TokenBalance
                        web3={web3}
                        account={account}
                        isConnected={isConnected}
                        onResult={handleTokenResult}
                    />
                );
            default:
                return <WalletConnect
                    web3={web3}
                    account={account}
                    balance={balance}
                    networkId={networkId}
                    isConnected={isConnected}
                    setAccount={web3DemoStore.setAccount.bind(web3DemoStore)}
                    setBalance={web3DemoStore.setBalance.bind(web3DemoStore)}
                    setNetworkId={web3DemoStore.setNetworkId.bind(web3DemoStore)}
                    setIsConnected={web3DemoStore.setIsConnected.bind(web3DemoStore)}
                />;
        }
    };

    return (
        <div className={styles.content}>
            <h1>Web3 功能演示</h1>

            {/* 卡片切换标签 */}
            <div className={styles.cardTabs}>
                <div
                    className={clsx(styles.cardTab, activeTab === 'wallet' && styles.active)}
                    onClick={() => web3DemoStore.setActiveTab('wallet')}
                >
                    钱包连接
                </div>
                <div
                    className={clsx(styles.cardTab, activeTab === 'transaction' && styles.active)}
                    onClick={() => web3DemoStore.setActiveTab('transaction')}
                >
                    发送交易
                </div>
                <div
                    className={clsx(styles.cardTab, activeTab === 'contract' && styles.active)}
                    onClick={() => web3DemoStore.setActiveTab('contract')}
                >
                    合约交互
                </div>
                <div
                    className={clsx(styles.cardTab, activeTab === 'tokens' && styles.active)}
                    onClick={() => web3DemoStore.setActiveTab('tokens')}
                >
                    代币余额
                </div>
            </div>

            {/* 功能卡片内容 */}
            {renderActiveTab()}

            {/* 操作结果显示区域 */}
            {contractResult && (
                <div className={styles.resultSection}>
                    <h3>操作结果</h3>
                    <pre className={styles.resultContent}>{contractResult}</pre>
                </div>
            )}

            {/* 功能说明 */}
            <div className={styles.infoSection}>
                <h3>功能介绍</h3>
                <ul>
                    <li>钱包连接 - 授权访问您的以太坊账户，查看余额和网络信息</li>
                    <li>发送交易 - 发送以太坊到指定地址，支持自定义金额</li>
                    <li>合约交互 - 创建合约实例，读取和写入合约数据</li>
                    <li>代币余额 - 查询各种ERC20代币的余额信息</li>
                </ul>

                {!((window as any).ethereum) && (
                    <p className={styles.note}>提示: 您没有安装MetaMask钱包插件，目前使用的是公共节点连接模式，只能进行只读操作</p>
                )}
            </div>
        </div>
    );
});

export default Web3Demo;
